<template>
	<view class="content">
		<z-paging ref="paging" :auto="false" :fixed="false" :height="height" v-model="dataList" @query="queryList">
			<view class="content_ls" v-for="item in dataList" :key="item.id" @click="toDetail(item.id)">
				<view class="content_ls_tp u-flex u-row-between">
					<view>
						<view class="top" v-if="item.stick == 1">
							置顶
						</view>
						<view class="u-font-36 u-font-weight">
							{{item.fullname}}
						</view>
						<view class="u-m-t-20 u-font-26" style="color: #867F7F;">
							{{`${item.experience_text} | ${item.education_text} | ${item.intention_wage}`}}
						</view>
						<view class="u-flex u-m-t-24" v-if="item.companyname && item.recent_work">
							<u-image src="/static/home/work.png" width="40" height="40"></u-image>
							<view class="u-m-l-14 u-line-1 u-white-60">
								{{item.companyname}} {{item.recent_work}}
							</view>
						</view>
						<view class="u-flex u-m-t-24">
							<u-image src="/static/home/intention.png" width="40" height="40"></u-image>
							<view class="u-m-l-14 u-line-1 u-white-60">
								求职期望：{{item.intention_jobs}}
							</view>
						</view>
					</view>
					<view class="u-flex u-flex-column">
						<u-avatar :src="item.photo_img_src" show-sex
							:sex-icon="item.sex == 1 ? 'man' : 'woman'"></u-avatar>
						<view class="u-m-t-20 content_ls_tips">
							{{item.refreshtime}}
						</view>
					</view>

				</view>

				<view class="u-flex u-flex-wrap u-m-t-24" v-if="item.tag.length > 0">
					<view class="content_ls_tag" v-for="(tagItem,index) in item.tag.slice(0,4)" :key="index">
						{{tagItem}}
					</view>
				</view>
				<text class="tag" v-if="item.service_tag != ''">{{ item.service_tag }}</text>
				<view class="u-line-3 u-m-t-20 content_ls_specialty" v-if="item.specialty">
					{{item.specialty}}
				</view>


			</view>
		</z-paging>
	</view>
</template>

<script setup>
	import {
		nextTick,
		ref,
		watch
	} from 'vue'
	import {
		useUserStore
	} from '/stores/userInfo.js'
	import {
		storeToRefs
	} from 'pinia'
	const {
		isLogin
	} = storeToRefs(useUserStore())
	const props = defineProps({
		height: String,
		params: Object,
		type: String
	})
	// 获取简历列表数据
	const paging = ref(null)
	let dataList = ref([])
	watch(() => props.height, n => {
		console.log(n)
	}, {
		immediate: true,
		deep: true
	})
	watch(() => [props.params, paging], (nv) => {
		if (JSON.stringify(nv[0]) == '{}') return
		if (nv[0].id || nv[0].keyword) {
			if (nv[1] && nv[1].value) {
				nv[1].value.reload(true)
			}
		}
	}, {
		immediate: true,
		deep: true
	})
	// 去简历详情页
	const toDetail = (id) => {
		uni.$u.route('pages/pagesHome/detailPages/resume', {
			id,
			jobid: props.params.id,
			jobname: props.params.jobname
		})
	}
	// 获取简历列表数据
	const queryList = async (pageNo, pageSize) => {
		if (!isLogin.value) {
			paging.value.complete()
			return
		}
		let params = Object.assign({
			page: pageNo,
			pagesize: pageSize,
		}, props.params)

		let res
		if (props.type == 'search') {
			res = await uni.$u.api.getResumeListSearch({
				params
			})
		} else {
			res = await uni.$u.api.getResumeList({
				params
			})
		}
		paging.value.complete(res.items)
	}
</script>
<style lang="scss" scoped>
	.content {
		background-color: #f1f1f1;

		&_ls {
			background-color: #fff;
			padding: 22rpx 32rpx;
			margin-top: 10rpx;
			color: #101010;
			font-size: 28rpx;
			position: relative;
			overflow: hidden;

			&_tag {
				background-color: #F2F2F2;
				margin-right: 20rpx;
				padding: 12rpx 18rpx;
				color: #867F7F;
				font-size: 24rpx;
				border-radius: 8rpx;
				margin-bottom: 10rpx;
			}

			&_tips {
				color: #867F7F;
				font-size: 24rpx;
			}

			&_specialty {
				font-size: 26rpx;
				color: #8a8888;
			}

			.top {
				position: absolute;
				right: -50rpx;
				top: -50rpx;
				width: 100rpx;
				height: 100rpx;
				background-color: #feae41;
				color: #ffffff;
				font-weight: bold;
				display: flex;
				align-items: flex-end;
				justify-content: center;
				transform: rotateZ(45deg);
				font-size: 24rpx;
			}
		}


		.tag {
			margin-top: 20rpx;
			padding: 6rpx 10rpx 6rpx 34rpx;
			border-radius: 6rpx;
			color: #ffffff;
			font-size: 24rpx;
			background: #ffa57d url('@/static/home/fab_ico.svg') 10rpx center no-repeat;
			background-size: 20rpx;
			display: inline-block;
		}
	}
</style>